import QtQuick 2.2
import QtQuick
import "widget"

Window {
    id:root
    width: 1200
    height: width/9*6
    visible: true
    title: qsTr("HolyFather")

    ///列
    Column{
        //矩形
        Rectangle {
            color: "grey"
            id: rectangle
            width: 200
            height: 300

            ListView {
                id: clippedList
                x: 20
                y: 20
                width: 70
                height: 100
                clip: true
                model: ["Item A", "Item B", "Item C", "Item D"]

                delegate: Rectangle {
                    color: "lightblue"
                    width: parent.width
                    height: 25

                    Text {
                        text: modelData
                        anchors.fill: parent
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                    }
                }
            }

            ListView {
                id: clippedDelegateList
                x: clippedList.x + clippedList.width + 20
                y: 20
                width: 70
                height: 100
                clip: true
                model: ["Item A", "Item B", "Item C", "Item D"]

                delegate: Rectangle {
                    color: "lightblue"
                    width: parent.width
                    height: 25
                    clip: true

                    Text {
                        text: modelData
                        anchors.fill: parent
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                    }
                }
            }
            Rectangle{
                id:rect2
                color: "blue"
                width: 100
                height:100
                anchors.left:rectangle.left
                anchors.bottom: rectangle.bottom
                anchors.leftMargin: 20

                Rectangle { id: myRect; width: 50; height: 50; color: "red" }

                states: State {
                   name: "reanchored"

                   AnchorChanges {
                       target: myRect
                       anchors.top: rect2.top
                       anchors.bottom: rect2.bottom
                   }
                   PropertyChanges {
                       target: myRect
                       anchors.topMargin: 10
                       anchors.bottomMargin: 10
                   }
                }
                MouseArea { anchors.fill: parent; onClicked: rect2.state = "reanchored" }
            }
        }
        //点击事件

        // Rectangle {
        //     color: "black"
        //     width: 100
        //     height: 100
        //     focus: true
        //     Keys.onPressed: (event)=> {
        //         if (event.key === Qt.Key_A) {
        //             console.log('Key A was pressed');
        //             event.accepted = true;
        //         }
        //     }
        // }
        //获取焦点和焦点范围
        // Rectangle {
        //     color: "lightsteelblue"
        //     width: 240
        //     height: 25
        //     Text {
        //         id: myText
        //         text: "xiaobai"
        //         color: "white"
        //     }
        //     Item {
        //         id: keyHandler
        //         focus: true
        //         Keys.onPressed: (event)=> {
        //             if (event.key === Qt.Key_A)
        //                 myText.text = 'Key A was pressed'
        //             else if (event.key === Qt.Key_B)
        //                 myText.text = 'Key B was pressed'
        //             else if (event.key === Qt.Key_C)
        //                 myText.text = 'Key C was pressed'
        //         }
        //     }
        // }
        // 可以创建多个实例
        // MyWidget {
        //     y: 50
        //     anchors.horizontalCenter: parent.horizontalCenter
        // }

        //自定义属性 + 信号
        MyWidget2 {
            id: widget2
            text: "Another instance 我是小白羊"
            //fun1
            // onCustomSignal: function( msg ){
            //     console.log("我是返回的msg:",msg)
            // }
            //fun2
            // onCustomSignal: ( msg )=>{
            //     console.log("我是返回的msg:",msg)
            // }
            //或者直接 fun3
            //// onCustomSignal: console.log("Message:", message)
            //Connections fun4
           //  Connections {
           //     target: myWidget
           //     onCustomSignal: {
           //         console.log("我是返回的msg:",message)
           //     }
           // }
            //信号与javascript函数相连 fun5
            onCustomSignal: handleSignal(message)
        }

        Rectangle {
            color: "lightsteelblue"; width: 100; height: 50

            ListView {
                anchors.fill: parent
                focus: true

                model: ListModel {
                    ListElement { name: "Bob" }
                    ListElement { name: "John" }
                    ListElement { name: "Michael" }
                }

                delegate: FocusScope {
                        width: childrenRect.width; height: childrenRect.height
                        x:childrenRect.x; y: childrenRect.y
                        TextInput {
                            focus: true
                            text: name
                            Keys.onReturnPressed: console.log(name)
                        }
                }
            }
        }

        Rectangle {
            id: button
            color: "#909090"
            width: 100; height: 100

            MouseArea {
                anchors.fill: parent
                onClicked: console.log("button clicked")
            }
            MouseArea {
                width:150; height: 75
                onClicked: console.log("irregular area clicked")
            }

            MouseArea {
                anchors.fill: parent
                onClicked: console.log("area clicked") //点击
                onDoubleClicked: console.log("area double clicked") //双击
                onEntered: console.log("mouse entered the area") //按下
                onExited: console.log("mouse left the area") //退出
            }
        }

        //验证
        spacing: 10

            Text {
                text: "Enter a value from 0 to 2000"
            }
            TextInput {
                color:"blue"
                focus: true
                text:"验证"
                validator: IntValidator { bottom:0; top: 2000}
            }

            Rectangle {
                id: buttons
                signal clicked
                onClicked: ()=>{
                    console.log("点击了")
                }
                width: 150; height: 50; radius: 3
                color: tapHandler.pressed ? "goldenrod" : hoverHandler.hovered ? "wheat" : "beige"
                border.color: activeFocus ? "brown" : "transparent"
                focus: true
                HoverHandler {
                     id: hoverHandler
                }
                TapHandler {
                    id: tapHandler
                    onTapped: buttons.clicked()
                }
                Keys.onEnterPressed: buttons.clicked()
            }

    }

    ///函数需要定义到window外层

    function handleSignal(msg) {
       console.log("我是返回的msg:", msg);
    }
}
